<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>header</title>
  <link rel="stylesheet" href="alwaysUse.css" />
  <style>
    #header {
      display: flex;
      flex-direction: row;
      width: 100vw;
      height: 5vh;
      background-color: #f5f5f5;
    }

    #header div {
      width: 10vw;
      height: 5vh;
      text-align: center;
    }

    ._one {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .SelectRegion {
      line-height: 5vh;
    }

    ._one #area {
      position: absolute;
      top: 5vh;
      width: 10vw;
      height: 50vh;
      background: #f5f5f5;
      display: none;
    }

    ._one #area span {
      display: block;
      line-height: 100px;
    }

    ._six #myHomePage {
      position: absolute;
      top: 5vh;
      width: 10vw;
      height: 100px;
      background: #f5f5f5;
      display: none;
    }

    ._six #myHomePage span {
      display: block;
      line-height: 50px;
    }

    #Search {
      display: flex;
      flex-direction: row;
      width: 100vw;
      height: 20vh;
      background: #928b8b;
    }

    #_searchOne {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 20vw;
      height: 20vh;
      background: rgb(229, 229, 222);
    }

    .time-item {
      width: 300px;
      height: 45px;
    }

    .time-item strong {
      background: orange;
      color: #fff;
      line-height: 30px;
      font-size: 20px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    #day {
      font-size: 20px;
    }

    #hour {
      font-size: 20px;
    }

    #minute {
      font-size: 20px;
    }

    #second {
      font-size: 20px;
    }

    .time-item>span {
      line-height: 30px;
      color: orange;
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .title {
      font-size: 30px;
      width: 260px;
      height: 50px;
    }

    #_searchOne>._searchLogo {
      width: 20vw;
      height: 20vh;
    }

    #_searchTwo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 60vw;
      height: 20vh;
      background-color: antiquewhite;
    }

    #_searchTwo>._searchInput {
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
      width: 40vw;
      height: 8vh;
      border-radius: 1rem;
      background: #928b8b;
      opacity: .6;
      overflow: hidden;
    }

    #_searchTwo>._searchInput input {
      width: 30vw;
      height: 2vh;
      font-size: 30px;
      font-family: "SF Pro";
      padding: 0.875rem;
      border: 1.5px solid #000;
      border-radius: 1rem;
      box-shadow: 2.5px 3px 0 #000;
      outline: none;
      transition: ease 0.25s;
    }

    #_searchTwo>._searchInput span img {
      width: 4vw;
      height: 5vh;
    }

    #main {
      display: flex;
      flex-direction: row;
      /* align-items: center; */
      justify-content: flex-start;
      width: 100vw;
      height: 100vh;
      background-color: rgb(229, 229, 222);
    }

    .good {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      width: 100vw;
      height: 80vh;
      border-radius: 1rem;
    }

    .goodImgFirst {
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30px;
      width: 200px;
      height: 300px;
    }

    .goodImgFirst button {
      width: 30px;
      height: 30px;
      border: 1px solid transparent;
      border-radius: 1rem;
      background-color: rgb(229, 229, 222);
    }

    .goodsPicture {
      width: 200px;
      height: 250px;
      border-radius: 1rem;
    }

    .goodImgFirst:hover {
      border: 1px solid red;
    }

    .shopping_car_event {
      box-sizing: border-box;
      position: fixed;
      display: flex;
      flex-direction: column;
      align-items: center;
      right: 0px;
      top: 50vh;
      width: 130px;
      height: 250px;
      border-radius: 2rem;
      outline: 1px solid transparent;
      background-color: yellow;
      opacity: .8;
      padding-top: 165px;
      color: #928b8b;
      opacity: 0;
      transition: all .3s;
    }

    .shopping_car_event a {
      display: block;
      text-align: center;
      width: 100%;
      height: 30px;
      line-height: 24px;
    }

    .shopping_car_event a:hover {
      background-color: rgb(211, 223, 80);
    }

    .shopping_car:hover+.shopping_car_event {
      opacity: 1;
    }

    .shopping_car_event:hover {
      opacity: 1;
    }

    .shopping_car {
      z-index: 1;
      position: fixed;
      display: flex;
      flex-direction: column;
      align-items: center;
      right: 0px;
      top: 50vh;
      width: 130px;
      height: 150px;
      border-radius: 2rem;
      outline: 1px solid transparent;
      background-color: yellow;
      opacity: .8;
    }

    .shopping_car img {
      width: 100px;
      height: 100px;
    }

    .shopping_car p {
      font-size: 14px;
      color: #928b8b;
    }

    #footer {
      width: 100vw;
      height: 30vh;
      background-color: #928b8b;
    }

    .footerTop {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100vw;
      height: 20vh;
      background: #f5f5f5;
    }

    .footerTop div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .footerTop {
      font-size: 12px;
      color: #928b8b;
    }


    #_searchTwoFloat {
      position: fixed;
      top: -10.2vh;
      transition: .3s;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 10vh;
      background-color: white;
      box-shadow: 0 1px 1px 1px rgb(232, 220, 220, 0.5);
    }

    #_searchTwoFloat>._searchInputFloat {
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
      width: 40vw;
      height: 8vh;
      border-radius: 1rem;
      background: #928b8b;
      opacity: .6;
      overflow: hidden;
    }

    #_searchTwoFloat>._searchInputFloat input {
      width: 30vw;
      height: 2vh;
      font-size: 30px;
      font-family: "SF Pro";
      padding: 0.875rem;
      border: 1.5px solid #000;
      border-radius: 1rem;
      box-shadow: 2.5px 3px 0 #000;
      outline: none;
      transition: ease 0.25s;
    }

    #_searchTwoFloat>._searchInputFloat span img {
      width: 4vw;
      height: 5vh;
    }
  </style>
</head>

<body>
  <div id="_searchTwoFloat">
    <div class="_searchInputFloat">
      <input placeholder="请输入您想要查找的商品" class="input" name="text" type="email" />
      <span><img src="./Img/SearchImg/搜索 copy.png" alt=""></span>
    </div>
  </div>
  <div class="header" id="header">
    <div class="_zero"></div>
    <div class="_one">
      <span class="SelectRegion">选择地区</span>
      <div id="area">
        <span><a href="###">北京</a></span>
        <span><a href="###">上海</a></span>
        <span><a href="###">广州</a></span>
        <span><a href="###">深圳</a></span>
      </div>
    </div>
    <div class="_two">
      <span class="SelectRegion"><a href="###">登录</a></span>
      <span class="SelectRegion"><a href="###">免费注册</a></span>
    </div>
    <div class="_three">
      <span class="SelectRegion"><a href="###">手机购物</a></span>
    </div>
    <div class="_four">
      <span class="SelectRegion"><a href="###">网页无障碍</a></span>
    </div>
    <div class="_zero"></div>
    <div class="_zero"></div>
    <div class="_five">
      <span class="SelectRegion"><a href="###">我的首页</a></span>
    </div>
    <div class="_six">
      <span class="SelectRegion" id="_myHomePage"><a href="">我的购物车</a></span>
      <div id="myHomePage">
        <span><a href="###">购物车</a></span>
        <span><a href="###">收藏夹</a></span>
      </div>
    </div>
    <div class="_seven">
      <span class="SelectRegion"><a href="">商品分类</a></span>
    </div>
    <div class="_eight">
      <span class="SelectRegion"><a href="">帮助中心</a></span>
    </div>
  </div>
  <div id="Search">
    <div id="_searchOne">
      <h1 class="title">距离光棍节，还有</h1>
      <div class="time-item">
        <span><span id="day">00</span>天</span>
        <strong><span id="hour">00</span>时</strong>
        <strong><span id="minute">00</span>分</strong>
        <strong><span id="second">00</span>秒</strong>
      </div>
    </div>
    <div id="_searchTwo">
      <div class="_searchInput">
        <input placeholder="请输入您想要查找的商品" class="input" name="text" type="email" />
        <span><img src="./Img/SearchImg/搜索 copy.png" alt=""></span>
      </div>
    </div>
    <div id="_searchThree"></div>
  </div>
  <div id="main">
    <div class="good">
      <div class="goodImgFirst"></div>
    </div>
    <div class="shopping_car">
      <img src="./Img/buttonImg/购物车.png" alt="###">
      <p>商品总件数:<span></span></p>
      <p>商品总额:<span></span></p>
    </div>
    <div class="shopping_car_event">
      <a href="">清空</a>
      <a href="">结算</a>
    </div>
  </div>
  <div id="footer">
    <div class="footerTop">
      <div class="footerTopOne">
        <span>购物协议</span>
        <span>全球购协议</span>
        <span>平台服务</span>
        <span>平台客服</span>
      </div>
      <div class="footerTopTwo">
        <span>新手开店</span>
        <span>加盟店铺</span>
        <span>商家服务</span>
        <span>平台店铺</span>
      </div>
      <div class="footerTopThree">
        <span>付款方式</span>
        <span>快捷支付</span>
        <span>查询余额</span>
        <span>借钱</span>
      </div>
      <div class="footerTopFour">
        <span>全球购特色</span>
        <span>全球购优惠政策</span>
      </div>
    </div>
    <div class="footerBottom"></div>
  </div>
</body>
<script>
  //选择地区下拉框
  var SelectRegion = document.querySelector("._one .SelectRegion");
  var area = document.getElementById("area");
  SelectRegion.onmouseenter = function () {
    area.style.display = "block";
  };
  area.onmouseleave = function () {
    area.style.display = "none";
  };
  //我的购物车下拉框
  var myHomePage = document.querySelector("._six>#_myHomePage");
  var _myHomePage = document.getElementById("myHomePage");
  myHomePage.addEventListener("mouseenter", function () {
    _myHomePage.style.display = "block";
  });
  _myHomePage.onmouseleave = function () {
    _myHomePage.style.display = "none";
  };

  // 目标时间的时间戳
  var endDate = new Date('2024-11-11 0:0:0');
  var end = endDate.getTime();

  // 获取天时分秒的盒子
  var spanDay = document.getElementById('day');
  var spanHour = document.getElementById('hour');
  var spanMinute = document.getElementById('minute');
  var spanSecond = document.getElementById('second');

  // 开启定时器
  setInterval(countdown, 1000);

  countdown();
  // 倒计时
  function countdown() {
    // 当前时间的时间戳
    var nowDate = new Date();
    var now = nowDate.getTime();

    // 计算时间差（毫秒）
    var leftTime = end - now;
    // 相差的秒数
    leftTime /= 1000;

    // 求 相差的天数/小时数/分钟数/秒数
    var day, hour, minute, second;

    day = Math.floor(leftTime / 60 / 60 / 24);
    hour = Math.floor(leftTime / 60 / 60 % 24);
    minute = Math.floor(leftTime / 60 % 60);
    second = Math.floor(leftTime % 60);

    // 设置盒子的内容
    spanDay.innerText = day;
    spanHour.innerText = hour;
    spanMinute.innerText = minute;
    spanSecond.innerText = second;

  }

  //搜索框
  var Search_value = document.querySelector('#_searchTwo > ._searchInput>input')
  Search_value.addEventListener('input', function () {
    var temp = Search_value.value;
    var Search_Img = document.querySelector('#_searchTwo > ._searchInput span img')
    Search_Img.addEventListener('click', function () {
      window.location.href = 'http://www.baidu.com/s?wd=' + temp;
    })
  })
  //渲染商品页面goods
  const goodList = [
    { goodsPicture: './Img/goods/good1.jpg_.webp', name: '红色上衣', price: 196 },
    { goodsPicture: './Img/goods/good2.png_.webp', name: '白色上衣', price: 456 },
    { goodsPicture: './Img/goods/good3.jpg_.webp', name: '米色上衣', price: 978 },
    { goodsPicture: './Img/goods/good4.jpg_.webp', name: '条纹上衣', price: 95 },
    { goodsPicture: './Img/goods/good5.jpg_.webp', name: '黑色西装', price: 98 },
    { goodsPicture: './Img/goods/good6.jpg_.webp', name: '黑色白字母上衣', price: 438 },
    { goodsPicture: './Img/goods/good7.jpg_.webp', name: '棕色上衣', price: 98 },
    { goodsPicture: './Img/goods/good8.jpg_.webp', name: '黑色短衫', price: 99 },
    { goodsPicture: './Img/goods/good9.jpg_.webp', name: '黑色上衣', price: 198 },
    { goodsPicture: './Img/goods/good10.jpg_.webp', name: '绿色上衣', price: 238 },
    { goodsPicture: './Img/goods/good11.jpg_.webp', name: '白色连衣裙', price: 148 },
    { goodsPicture: './Img/goods/good12.jpg_.webp', name: '条纹裙子', price: 198 },
  ]
  //封装函数
  function render(arr) {
    //声明空串
    var str = ''
    //遍历数据
    arr.forEach(item => {
      //对象解构
      const { goodsPicture, name, price } = item
      str += `
       <div class="goodImgFirst"><img class="goodsPicture" src="${goodsPicture}" alt="###">
       <p><a class="name" href="">商品名称:${name}</a></p>
       <p><a class="price" href="">商品价格:${price}</a></p><button>➕</button></div>
        `
    });
    document.querySelector('.good').innerHTML = str
  }
  render(goodList)

  //购物车
  var shoppingCar = document.querySelectorAll('.goodImgFirst>button')
  var temp = 0;
  var sum = 0;
  shoppingCar.forEach((item, index) => {
    item.addEventListener('click', function () {
      temp++;
      var count = document.querySelector('.shopping_car p:nth-of-type(1) span')
      count.innerText = temp;
      var total = document.querySelector('.shopping_car p:nth-of-type(2) span')
      sum += +goodList[index].price
      total.innerText = sum

    })
  })
  let div = document.querySelector('#_searchTwoFloat')
  let height = +div.offsetHeight
  window.addEventListener('scroll', function () {
    let scroll = document.documentElement.scrollTop
    console.log(scroll);
    if (scroll > 200) {
      div.style.top = "0px"
    } else {
      div.style.top = '-10.2vh'
    }
  })
</script>

</html>